<template>
	<view class="content">
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					
					<!-- 订单列表 -->
					<view 
						v-for="(item,index) in tabItem.orderList" :key="item.orderId"
						class="order-item"
					>
						<!-- 店铺信息 -->
						<view class="shop-info b-b">
							<text class="shop-name">{{ item.shopName }}</text>
							<text class="more">进店 ></text>
						</view>
						
						<!-- 订单状态和时间 -->
						<view class="i-top b-b">
							<text class="time">{{ item.time }}</text>
							<text class="state" :style="{color: item.stateTipColor}">{{ item.stateTip }}</text>
							<text 
								v-if="item.state === 9" 
								class="del-btn yticon icon-iconfontshanchu1"
								@click="deleteOrder(index)"
							></text>
						</view>
						
						<!-- 订单商品列表 -->
						<!-- 订单商品列表 -->
						<view v-if="item.goodsList.length > 0">
						  <!-- 只保留一种展示方式，或者使用更清晰的条件判断 -->
						  <view v-if="item.goodsList.length > 1" class="multi-goods-container">
						    <scroll-view class="goods-box" scroll-x>
						        <view
						          v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsItem.orderItemId"
						          class="goods-item"
						          :class="{ 'zero-count': goodsItem.number === 0 }"
						        >
						          <image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
						          <text class="goods-title">{{ goodsItem.title }}</text> <!-- 显示SPU名称 -->
						          <text class="goods-attr">{{ goodsItem.attr }}</text> <!-- 显示SKU信息 -->
						          <text class="goods-count">x{{ goodsItem.number }}</text>
						          <text class="zero-count-tag" v-if="goodsItem.number === 0">已取消</text>
						        </view>
						      </scroll-view>
						  </view>
						  
						  <view v-else>
						    <view 
						      v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsItem.orderItemId"
						      class="goods-box-single"
						      :class="{ 'zero-count': goodsItem.number === 0 }"
						    >
						      <image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
						      <view class="right">
						        <text class="title clamp">{{ goodsItem.title }}</text>
						        <text class="attr-box">{{ goodsItem.attr }}  x {{ goodsItem.number }}</text>
						        <text class="price">{{ goodsItem.price }}</text>
						        <text class="zero-count-tag" v-if="goodsItem.number === 0">已取消</text>
						      </view>
						    </view>
						  </view>
						</view>
						
						<!-- 空商品提示 -->
						<view class="empty-goods" v-if="item.goodsList.length === 0">
							<text>该订单没有商品信息</text>
						</view>
						
						<!-- 收货地址信息 -->
						<view class="address-box b-t" v-if="item.addressInfo">
							<text class="address-label">收货信息：</text>
							<text class="address-content">{{ item.addressInfo.consignee }} {{ item.addressInfo.mobile }} | {{ item.addressInfo.fullAddress }}</text>
						</view>
						
						<!-- 价格信息 -->
						<view class="price-box">
							共
							<text class="num">{{ item.validGoodsCount }}</text>
							件商品 实付款
							<text class="price">￥{{ item.calculatedTotal.toFixed(2) }}</text>
						</view>
						
						<!-- 操作按钮 -->
						<view class="action-box b-t" v-if="item.state != 9">
							<button class="action-btn" v-if="item.state === 1 || item.state === 2" @click="cancelOrder(item)">取消订单</button>
							<button class="action-btn recom" v-if="item.state === 1" @click="payOrder(item)">立即支付</button>
							<button class="action-btn recom" v-if="item.state === 3" @click="confirmReceive(item)">确认收货</button>
							<button class="action-btn" v-if="item.state === 5" @click="toComment(item)">去评价</button>
							<button class="action-btn" v-if="item.state === 2" @click="checkLogistics(item)">查看物流</button>
						</view>
					</view>
					 
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import api from '@/utils/api.js';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '全部',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 1,
						text: '待付款',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 2,
						text: '待发货',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 3,
						text: '待收货',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 5,
						text: '待评价',
						loadingType: 'more',
						orderList: [],
						loaded: false
					}
				],
			};
		},
		
		onLoad(options){
			this.tabCurrentIndex = options.state ? +options.state : 0;
			// #ifndef MP
			this.loadData()
			// #endif
			// #ifdef MP
			if(!options.state || options.state == 0){
				this.loadData()
			}
			// #endif
		},
		 
		methods: {
			//获取订单列表
			loadData(source){
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				
				if(source === 'tabChange' && navItem.loaded === true){
					//tab切换只有第一次需要加载数据
					return;
				}
				if(navItem.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				
				navItem.loadingType = 'loading';
				
				api.orderShow().then(res=>{
					console.log("订单数据:", res);
					if(res.code === 200 && res.data && Array.isArray(res.data)){
						// 处理订单数据
						let orderList = res.data
							// 过滤出符合当前标签页状态的订单
							.filter(order => {
								if(state === 0) return true; // 全部订单
								return order.status === state;
							})
							// 转换订单格式为页面所需
							.map(order => {
								// 添加订单状态显示信息
								const stateInfo = this.orderStateExp(order.status);
								
								// 处理订单项
								const goodsList = (order.orderItems || [])
									.map(item => ({
										orderItemId: item.orderItemId,
										image: item.pic,
										title: item.spuName,
										attr: item.skuName,
										number: item.count,
										price: `￥${(item.price / 100).toFixed(2)}`,
										originalPrice: item.price,
										spuId:item.spuId,
										skuId:item.skuId// 保存原始价格（分）用于计算
									}));
								
								// 计算有效商品总数（只计算数量>0的商品）
								const validGoodsCount = goodsList.reduce((total, item) => {
									return total + (item.number > 0 ? item.number : 0);
								}, 0);
								
								// 计算订单总价（根据商品实际数量）
								const calculatedTotal = goodsList.reduce((total, item) => {
									return total + (item.number > 0 ? (item.originalPrice * item.number / 100) : 0);
								}, 0);
								
								// 处理地址信息
								let addressInfo = null;
								if (order.orderAddr) {
									const addr = order.orderAddr;
									// 修正后（添加lng和lat）：
									addressInfo = {
									  consignee: addr.consignee,
									  mobile: addr.mobile,
									  fullAddress: `${addr.province}${addr.city}${addr.area}${addr.addr}`,
									  postCode: addr.postCode,
									  lng: addr.lng || 0,  // 补充收货经度
									  lat: addr.lat || 0   // 补充收货纬度
									};
								}
								
								// 确定显示的时间
								let time = order.create_time || order.payTime || order.deliveryTime || order.finallyTime || '';
								
								return {
									orderId: order.orderIdStr || order.orderId, // 优先使用字符串版本
									shopName: order.shopName || '未知店铺',
									time: this.formatTime(time),
									state: order.status,
									stateTip: stateInfo.stateTip,
									stateTipColor: stateInfo.stateTipColor,
									goodsList: goodsList,
									validGoodsCount: validGoodsCount,
									allCount: order.allCount || 0,
									total: order.total || 0, // 保留原始总价
									calculatedTotal: calculatedTotal, // 新增：根据商品数量计算的总价
									addressInfo: addressInfo,
									shopAddr: order.shopAddr || '', // 关键：添加这一行，保留商家地址
									shopLng: order.shopLng || 0,     // 从接口数据中获取商家经度
									shopLat: order.shopLat || 0      // 从接口数据中获取商家纬度
								};
							});
						
						// 添加到订单列表
						navItem.orderList = orderList;
						// 标记为已加载
						this.$set(navItem, 'loaded', true);
						// 更新加载状态
						navItem.loadingType = 'noMore';
					} else {
						// 数据异常处理
						this.$set(navItem, 'loaded', true);
						navItem.loadingType = 'more';
					}
				}).catch(err=>{
					console.log('获取订单失败:', err);
					navItem.loadingType = 'more';
				});
			}, 

			// 格式化时间显示
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
			
			//删除订单
			deleteOrder(index){
				uni.showModal({
					title: '提示',
					content: '确定要删除该订单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({ title: '处理中' });
							setTimeout(() => {
								this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
								uni.hideLoading();
								uni.showToast({ title: '删除成功', icon: 'success' });
							}, 600);
						}
					}
				});
			},
			
			//取消订单
			// 在methods中找到并替换cancelOrder方法
			cancelOrder(item) {
			  uni.showModal({
			    title: '提示',
			    content: '确定要取消该订单吗？',
			    success: (res) => {
			      if (res.confirm) {
			        uni.showLoading({ title: '处理中' });
			        
			        // 调用后端API取消订单
			        api.cancelOrder(item.orderId)
			          .then(response => {
			            // 隐藏加载提示
			            uni.hideLoading();
			            
			            console.log("取消订单响应:", response);
			            
			            // 检查API返回结果
			            if (response.code === 200) {
			              // 取消成功，更新订单状态
			              const stateInfo = this.orderStateExp(9);
			              Object.assign(item, {
			                state: 9,
			                stateTip: stateInfo.stateTip,
			                stateTipColor: stateInfo.stateTipColor
			              });
			              
			              // 从待付款列表中移除
			              const pendingPaymentList = this.navList[1].orderList;
			              const idx = pendingPaymentList.findIndex(val => val.orderId === item.orderId);
			              if (idx !== -1) {
			                pendingPaymentList.splice(idx, 1);
			              }
			              
			              uni.showToast({ title: '订单已取消', icon: 'success' });
						  // 刷新数据
						  this.onLoad()
			            } else {
			              // 处理业务错误
			              uni.showToast({ 
			                title: response.msg || '取消订单失败', 
			                icon: 'none' 
			              });
			            }
			          })
			          .catch(error => {
			            // 隐藏加载提示
			            uni.hideLoading();
			            // 处理网络错误
			            console.error('取消订单失败:', error);
			            console.error('错误详情:', error.response || error);
			            uni.showToast({ 
			              title: error.response?.data?.msg || '正在处理......', 
			              icon: 'none' 
			            });
			          });
			      }
			    }
			  });
			},
			
			// 立即支付
			payOrder(item) {
				// 构建订单信息，包含商品详情
				const orderInfo = {
					orderId: item.orderId,
					payAmount: item.calculatedTotal, // 使用计算后的总价
					productList: item.goodsList.map(goods => ({
						id: goods.orderItemId,
						title: goods.title,
						image: goods.image,
						price: parseFloat(goods.price.replace('￥', '')), // 转换为数字
						quantity: goods.number,
						spec: goods.attr,
						shopId: 1, // 默认店铺ID，可根据实际情况调整
						shopName: item.shopName,
						skuId: goods.orderItemId, // 使用orderItemId作为skuId
						spuId: goods.orderItemId // 使用orderItemId作为spuId
					})),
					shopInfo: {
						name: item.shopName,
						logo: 'http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png' // 默认logo
					},
					createTime: new Date().toISOString() // 当前时间作为创建时间
				};
				
				// 跳转到支付页面，传递完整的订单信息
				uni.redirectTo({
					url: `/pages/money/pay?orderInfo=${encodeURIComponent(JSON.stringify(orderInfo))}`
				});
			},
			
			// 确认收货
			confirmReceive(item) {
			  uni.showModal({
			    title: '提示',
			    content: '确定已收到商品吗？',
			    success: (res) => {
			      if (res.confirm) { // 注意：之前漏掉了对res.confirm的判断，导致无论是否确认都会调用接口
			        uni.showLoading({ title: '处理中' });
			        api.receiveOrder(item.orderId)
			          .then(response => {
			            uni.hideLoading();
			            if (response.code === 200) {
			              // 1. 先更新当前订单的本地状态（实时刷新UI）
			              const stateInfo = this.orderStateExp(5); // 5代表“交易成功/待评价”
			              Object.assign(item, {
			                state: 5,
			                stateTip: stateInfo.stateTip,
			                stateTipColor: stateInfo.stateTipColor
			              });
			
			              // 2. 从“待收货”列表中移除该订单（当前标签页是索引3）
			              const pendingReceiveList = this.navList[3].orderList;
			              const idx = pendingReceiveList.findIndex(val => val.orderId === item.orderId);
			              if (idx !== -1) {
			                pendingReceiveList.splice(idx, 1);
			              }
			
			              // 3. 添加到“待评价”列表（索引4）
			              this.navList[4].orderList.push({...item});
			
			              // 4. 重新加载数据确保同步（可选，根据接口是否返回最新数据决定）
			              this.loadData();
			
			              uni.showToast({ title: '已确认收货', icon: 'success' });
			            } else {
			              uni.showToast({ title: response.msg || '确认收货失败', icon: 'none' });
			            }
			          })
			          .catch(error => {
			            uni.hideLoading();
			            console.error('确认收货失败:', error);
			            uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
			          });
			      }
			    }
			  });
			},
			
			// 去评价
						// 去评价
						toComment(item) {
						  // 保存当前订单信息到本地存储，供评价页面使用
						  uni.setStorageSync('currentOrderInfo', item);
						  
						  console.log("item:", item);
						  console.log("item.goodsList:", item.goodsList);
						  
						  // 验证订单信息
						  if (!item || !item.orderId || !item.goodsList || item.goodsList.length === 0) {
						    uni.showToast({
						      title: '订单信息不完整，无法评价',
						      icon: 'none'
						    });
						    return;
						  }
						  
						  // 从goodsList中提取所有商品的spuId和skuId，用逗号拼接为字符串
						  const spuIds = item.goodsList.map(goods => goods.spuId).join(',');
						  const skuIds = item.goodsList.map(goods => goods.skuId).join(',');
						  
						  // 跳转到评价页面，传递订单ID、spuIds、skuIds
						  uni.navigateTo({
						    url: `/pages/comment/CommentPage?orderId=${item.orderId}&spuIds=${spuIds}&skuIds=${skuIds}`
						  });
						},
			
			// 查看物流
			checkLogistics(item) {
			  if (!item || !item.addressInfo) {
			    console.error('订单信息或地址信息不存在');
			    uni.showToast({ title: '数据错误，无法查看物流', icon: 'none' });
			    return;
			  }
			
			  // 关键：打印收货地址的经纬度，验证是否与实际地址匹配
			  console.log('收货地址文字：', item.addressInfo.fullAddress);
			  console.log('传递的收货经纬度：', item.addressInfo.lng, item.addressInfo.lat);
			  console.log("发货地址:",item.shopAddr)
			  console.log("order:shoplng:",item.shopLng);
			  console.log("order:shoplat:",item.shopLat);
			  // 例如：深圳宝安区的经纬度大致为 113.82, 22.55（正确），若显示其他值则为错误
			
			  const logisticsParams = {
			    orderId: item.orderId,
			    deliveryTime: item.time || '',
			    shopAddr: item.shopAddr || '', // 商家地址文字（需准确）
			    receiveName: item.addressInfo.consignee || '',
			    receiveMobile: item.addressInfo.mobile || '',
			    receiveAddr: item.addressInfo.fullAddress || '', // 收货地址文字（需准确）
				
				shopLng: item.shopLng || 0, // 新增：商家经度
				shopLat: item.shopLat || 0, // 新增：商家纬度
				
			    receiveLng: item.addressInfo.lng || 0, // 确保是正确的经度
			    receiveLat: item.addressInfo.lat || 0, // 确保是正确的纬度
			  };
			
			  // 构建参数并跳转
			  const queryString = Object.keys(logisticsParams)
			    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(logisticsParams[key])}`)
			    .join('&');
			  uni.navigateTo({ url: `/pages/findaddr/logistics?${queryString}` });
			},
			
			//订单状态文字和颜色
			orderStateExp(state){
				let stateTip = '',
					stateTipColor = '#fa436a';
					
				switch(+state){
					case 1:
						stateTip = '待付款'; 
						stateTipColor = '#fa436a';
						break;
					case 2:
						stateTip = '待发货'; 
						stateTipColor = '#ff9800';
						break;
					case 3:
						stateTip = '待收货'; 
						stateTipColor = '#2196f3';
						break;
					case 5:
						stateTip = '交易成功'; 
						stateTipColor = '#4caf50';
						break;
					case 6:
						stateTip = '交易失败'; 
						stateTipColor = '#f44336';
						break;
					case 9:
						stateTip = '订单已关闭'; 
						stateTipColor = '#909399';
						break;
					default:
						stateTip = `未知状态(${state})`;
						stateTipColor = '#909399';
				}
				return {stateTip, stateTipColor};
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item{
		height: auto;
	}
	
	/* 店铺信息 */
	.shop-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70upx;
		padding: 0 30upx;
		.shop-name {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			font-weight: 500;
		}
		.more {
			font-size: $font-sm;
			color: $base-color;
		}
	}
	
	.order-item{
		display: flex;
		flex-direction: column;
		background: #fff;
		margin-top: 16upx;
		.i-top{
			display: flex;
			align-items: center;
			height: 80upx;
			padding: 0 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
			.time{
				flex: 1;
			}
			.state{
				color: $base-color;
				margin-right: 20upx;
			}
			.del-btn{
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;
				&:after{
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		
		/* 多条商品 */
		/* 多条商品 */
		    .multi-goods-container {
		        padding: 20upx 0;
		    }
		    .goods-box {
		        /* 移除固定高度限制，让内容决定高度 */
		        padding: 0 30upx;
		        white-space: nowrap;
		    }
		    .goods-item {
		        /* 增加宽度以容纳文字信息 */
		        width: 220upx;
		        height: auto; /* 取消固定高度 */
		        display: inline-block;
		        margin-right: 24upx;
		        position: relative;
		        padding: 10upx;
		        vertical-align: top; /* 顶部对齐 */
		    }
		    .goods-img {
		        display: block;
		        width: 100%;
		        height: 140upx; /* 保持图片高度一致 */
		        border-radius: 8upx;
		    }
		    .goods-title {
		        display: block;
		        font-size: 24upx;
		        color: $font-color-dark;
		        white-space: nowrap;
		        overflow: hidden;
		        text-overflow: ellipsis;
		        margin-top: 8upx;
		        line-height: 1.2;
		    }
		    .goods-attr {
		        display: block;
		        font-size: 20upx;
		        color: $font-color-light;
		        white-space: nowrap;
		        overflow: hidden;
		        text-overflow: ellipsis;
		        margin-top: 5upx;
		        line-height: 1.2;
		    }
		    .goods-count {
		        position: absolute;
		        right: 15upx;
		        bottom: 15upx;
		        background-color: rgba(0,0,0,0.6);
		        color: white;
		        font-size: 24upx;
		        padding: 2upx 8upx;
		        border-radius: 10upx;
		    }
		
		/* 单条商品 */
		.goods-box-single{
			display: flex;
			padding: 20upx 30upx;
			.goods-img{
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 0 0 24upx;
				overflow: hidden;
				.title{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.attr-box{
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 0;
					flex: 1;
				}
				.price{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					align-self: flex-end;
				}
			}
		}
		
		/* 数量为0的商品样式 */
		.zero-count {
			opacity: 0.6;
		}
		
		.zero-count-tag {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(255, 0, 0, 0.7);
			color: white;
			font-size: 28upx;
			padding: 5upx 15upx;
			border-radius: 5upx;
			z-index: 1;
		}
		
		.goods-box-single.zero-count .zero-count-tag {
			position: static;
			transform: none;
			align-self: flex-start;
			margin-top: 10upx;
			font-size: 24upx;
		}
		
		/* 空商品提示 */
		.empty-goods {
			height: 120upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $font-color-light;
			font-size: $font-base;
		}
		
		/* 地址信息 */
		.address-box {
			padding: 20upx 30upx;
			font-size: $font-base;
			.address-label {
				color: $font-color-light;
				margin-right: 10upx;
			}
			.address-content {
				color: $font-color-dark;
				word-break: break-all;
			}
		}
		
		.price-box{
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			.num{
				margin: 0 8upx;
				color: $font-color-dark;
			}
			.price{
				font-size: $font-lg;
				color: #fa436a;
				font-weight: 500;
			}
		}
		
		.action-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
		
		.action-btn{
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			&:after{
				border-radius: 100px;
			}
			&.recom{
				background: #fff9f9;
				color: $base-color;
				&:after{
					border-color: #f7bcc8;
				}
			}
		}
		
		.b-t {
			border-top: 1px solid $border-color-light;
		}
		
		.b-b {
			border-bottom: 1px solid $border-color-light;
		}
	}
	
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
</style>
    